const { defineConfig } = require('@vue/cli-service') 
const CompressionWebpackPlugin = require('compression-webpack-plugin') // gzip压缩
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin // 打包分析插件
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
const webpack = require('webpack')
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i    // 开启gzip压缩 按需写入
const AutoImport = require('unplugin-auto-import/webpack').default ,
      Components = require('unplugin-vue-components/webpack').default,
      VueRouter = require('unplugin-vue-router/webpack')
const path = require('path')
/*[
  'D:\\software\\node\\node.exe',
  'D:\\work\\分享\\demo\\node_modules\\@vue\\cli-service\\bin\\vue-cli-service.js',
  'serve',
  '--cli'
]
  */
console.log(11,process.argv , AutoImport , Components)
 
module.exports = {
    publicPath:'/' ,
    outputDir : 'build-cli' ,
    assetsDir:'public/asserts',
    filenameHashing:true ,
    indexPath:'public/index.html',
    /*
    pages : {
        index : {
            entry :'src/cli/index.js' ,
            template:'public/index.html' ,
            filename:'index.html',
            title:'index' ,
            chunks :[]
        },
        demo : {
            entry :'src/cli/index.js' ,
            template:'public/demo.html' ,
            filename:'demo.html',
            title:'demo'
        }
    },
    */
    lintOnSave:process.env.NODE_ENV !=='production',
    runtimeCompiler:false ,
    productionSourceMap:process.env.NODE_ENV =='production' ,
    devServer : {
        host : '0.0.0.0' ,
        hot : true ,
        port : 8000 ,
        proxy :{
            '/api': {
                target: 'http://192.168.31.125:8000', // 我们要代理的真实接口地址
                changeOrigin:true ,
                ws : true ,
                secure:false
            }

        }
    },
    chainWebpack : config => {
        config.plugins.delete('preload')
        config.plugins.delete('prefetch') 
        if(process.env.NODE_ENV =='production') {
           config.module.rule('images')
           .use('image-webpack-loader')
           .loader('image-webpack-loader')
           .options({
                mozjpeg : {
                    progressive:true ,
                    quality:65
                } ,
                optipng: {
                    enabled:false 
                },
                pngquant : {
                    quality : [.6,.9] ,
                    speed : 4 
                },
                gifsicle : {
                    interlaced : false 
                },
                pypassOnDebug : true 
           })
           .end()
        }
    },
    // configureWebpack
    configureWebpack : config => {
        config.devtool = 'source-map'

        config.cache = {
            type :'filesystem' ,
            allowCollectingMemory : true 
        }

        Object.assign(config.resolve,{
            alias : {
                '@': path.resolve(__dirname,'./src')
            }
        })
        
        Object.assign(config.optimization,{
            runtimeChunk :'single' ,
            splitChunks : {
                chunks :'all' ,
                minSize : 2e1 * 1024 ,
                cacheGroups : {
                    vendor : {
                        test : /[\\/]node_modules[\\/]/ ,
                        name (module) {
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1] 
                            return `npm.${packageName.replace('@','')}`
                        }
                    }
                }
            }
        })
        // const pluginAuto = AutoImport({
        //     resolvers : [VueRouter.resolver]
        // })
        // const pluginComponent = Components({
        //     resolvers:[VueRouter.resolver]
        // })
        // const pluginRoute = VueRouter({
        //     extensions:['.vue'] ,
        //     importMode : 'async' ,
        //     routesFolder : [
        //         {
        //             src :'src/pages' 
        //         }
        //     ],
        //     logs : true 
        // })
        // config.plugins.push(pluginAuto, pluginRoute)

        config.optimization.minimizer.push(
            new TerserPlugin({
                terserOptions:{
                    compress : {
                        drop_console : true 
                    }
                }
            })
        )
        
         // 添加gzip压缩插件
        config.plugins.push(
            new CompressionWebpackPlugin({
            filename: '[path][base].gz',
            algorithm: 'gzip',
            test: productionGzipExtensions,
            threshold: 1e1 * 1024, // 只有大小大于该值的资源会被处理
            minRatio: .8,       // 只有压缩率小于这个值的资源才会处理
            })
        )
        console.log(69,config)
    },
    css : {
        extract : process.env.NODE_ENV ==='production' , // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
        sourceMap:false ,
        loaderOptions : {
            css  : {
            },
            sass: {
                // @/ 是 src/ 的别名
                // 所以这里假设你有 `src/variables.sass` 这个文件
                // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
                // additionalData: `@import "~@/variables.sass"`
              },
              // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
              // 因为 `scss` 语法在内部也是由 sass-loader 处理的
              // 但是在配置 `prependData` 选项的时候
              // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
              // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
              scss: {
                // additionalData: `@import "~@/variables.scss";`
              },
              // 给 less-loader 传递 Less.js 相关选项
              less:{
                // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
                // `primary` is global variables fields name
                globalVars: {
                  primary: '#fff'
                }
              }
        }
    },
    pluginOptions : {

    }
}